<template>
  <div ref="bar" class="main">条形图组件</div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "BarEchart",
  props:['data'],
  data(){
    return{
      chart:null,
    }
  },
  mounted() {
    this.chart=echarts.init(this.$refs.bar)
    this.chart.setOption({
      xAxis:{
        show:false,
        type:'category'
      },
      yAxis:{
        show:false,
      },
      series:[{
        type:'bar',
        // data:[5, 18, 15, 12, 8, 16,25,21,10,6],
        data:this.data,
        color:'#29d'
      }],
      //布局
      gird:{
        top:0,
        bottom:0,
        left:0,
        right:0
      },
      //提示信息
      tooltip:{},
    })
  },
  watch:{
    data(){
      this.chart.setOption({
        series:[{
          data:this.data,
        }]
      })
    },
  }
}
</script>

<style scoped>
.main{
  width:100%;
  height:100%;
}
</style>
